<template>
	<view class="page">
		<view class="body">
			<u-parse :content="holiday.content" />
			<view class="btn">
				<u-button type="success" text="上一章" size="small" v-if="holiday.last" @tap.stop="toPre"></u-button>
				<u-button type="success" text="下一章" size="small" v-if="holiday.next" @tap.stop="toNext"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bookContent
	} from "@/request/homeApi.js";
	export default {
		data() {
			return {
				holiday: {},
				id: ''
			};
		},
		onLoad(e) {
			this.id = e.id ? e.id : ''
			this.getList(this.id);
		},
		methods: {
			toPre(e) {
				this.id = this.holiday.last ? this.holiday.last : ''
				this.getList(this.id);
			},
			toNext() {
				this.id = this.holiday.next ? this.holiday.next : ''
				this.getList(this.id);
			},
			// 获取详情
			getList(id) {
				let that = this
				bookContent(id).then((res) => {
					if (res.code == 200) {
						that.holiday = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		.body {
			width: 100%;
			padding: 24rpx 28rpx;
			min-height: 100rpx;
			box-sizing: border-box;
			background-color: #D2E4D6;
			height: 100vh;
			overflow-y: auto;
			font-size: 30rpx;
			padding-bottom: 70rpx;

			.btn {
				position: fixed;
				bottom: 0;
				left: 0;
				height: 80rpx;
				background: #D2E4D6;
				width: 100%;
				display: flex;
				align-items: center;
				padding: 20rpx 40rpx 20rpx;
				justify-content: space-between;
				box-shadow: 0 0 10rpx rgba(228, 228, 228, 0.5);
				box-sizing: border-box;
				z-index: 2;

				/deep/ .u-button {
					width: 34%;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
